<template>
  <div>
    <div
      id="main"
      class="main"
      style="width: 400px;height:250px;left:45rem;top:3rem;font-size:0.92rem;position:absolute;"
    ></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  name: "RoghtTopCharts",
  props: ["series", "yeardata"],
  data() {
    return {};
  },
  watch: {
    series: {
      handler() {
        this.draw();
      },
      deep: true
    },
    yeardata: {
      handler() {
        this.draw();
      },
      deep: true
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      setTimeout(() => {
        var myChart = echarts.init(document.getElementById("main"));

        let propsSeries = this.series;
        let propsYeardata = this.yeardata;
        let option = {
          tooltip: {
            trigger: "axis"
          },
          textStyle: {
            color: "#BED7FA",
            fontSize: 12
          },
          grid: {
            left: "0",
            right: "0",
            bottom: "0",
            containLabel: true
          },
          xAxis: {
            boundaryGap: false,
            type: "category",
            data: propsYeardata,
            axisLine: {
              lineStyle: {
                color: "rgba(43,183,255,0.10)"
              }
            }
          },
          yAxis: [
            {
              axisLine: {
                lineStyle: {
                  color: "rgba(43,183,255,0.10)"
                },
                splitLine: {
                  show: false
                }
              },
              name: "单位(个)",
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: "{value} K"
              },
              splitLine: {
                show: false
              }
            },
            {
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(43,183,255,0.10)"
                }
              },
              name: "单位(万元)",
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: "{value}K"
              }
            }
          ],
          series: propsSeries
        };
        myChart.setOption(option);
      }, 0);
    }
  }
};
</script>